<template>
    <a-modal :visible="isEcharts" @cancel="cloEchartsFn" title="图表" centered width="80%" :footer="null" destroyOnClose>
        <div class="line-echarts" ref="lineecharts"></div>
    </a-modal>
</template>
<script>
import moment from "moment";
import echarts from "echarts";
export default {
    props: {
        chartData: Object,
    },
    data() {
        return {
            isEcharts: false,
            createTime: "",
            echartsData: [],
            myCharts: "",
        };
    },
    methods: {
        cloEchartsFn() {
          this.isEcharts = false;
            this.isloading = true;
            this.total = 0;
            // this.chartData = {};
            // this.echartsData = [];
        },
        initEcharFn() {
            // this.myCharts.clear();
            let lineData = [];
            var timeData = [];
            var min = this.chartData.minValue,
                max = this.chartData.maxValue,
                _min = 0,
                _max = 0;
            let dataobj = {};
            this.echartsData.forEach((v) => {
                if (v.sampleValue > max) {
                    dataobj = {
                        value: v.sampleValue,
                        symbol: "rect",
                        itemStyle: {
                            color: "#d96a57",
                        },
                    };
                } else {
                    dataobj = {
                        value: v.sampleValue,
                        symbol: "rect",
                        itemStyle: {
                            color: "#37ddc0",
                        },
                    };
                }
                if (v.sampleValue > _max) {
                    _max = v.sampleValue;
                }
                if (v.sampleValue < _min) {
                    _min = v.sampleValue;
                }

                lineData.push(dataobj);
                timeData.push(
                    moment(parseInt(v.dataTime)).format("MM/DD HH:mm:ss")
                );
            });
            var shadowData = [
                {
                    yAxis: max,
                    // symbol: 'circle',
                    label: {
                        show: true,
                        position: "end",
                        formatter: "最大值",
                    },
                    lineStyle: {
                        color: "#359842",
                    },
                },
                {
                    yAxis: max,
                    // symbol: 'circle',
                    label: {
                        show: true,
                        position: "start",
                        formatter: "{c}",
                    },
                    lineStyle: {
                        color: "#359842",
                    },
                },
            ];

            var color = ["#16fb93", "#ffffff", "#76b2e5"];
            this.myCharts.setOption({
                //提示框组件
                tooltip: {
                    trigger: "axis",
                    show: true,
                    axisPointer: {
                        lineStyle: {
                            color: "#207064",
                        },
                    },
                    formatter: function (params) {
                        var res = "";
                        for (var i = 0; i < params.length; i++) {
                            // res +=params[i].name+"<br/>"+params[i].marker+params[i].value+"("+unit +")";
                            res +=params[i].name+"<br/>"+params[i].marker+params[i].value;
                        }
                        return res;
                    },
                },
                grid: {
                    top: 40,
                    left: 40,
                    bottom: "35%",
                    right: 40,
                },
                xAxis: {
                    name: "日期",
                    nameGap: 5,
                    nameTextStyle: {
                        color: "#37ddc0",
                        fontSize: 16,
                    },
                    textStyle: {
                        color: "red",
                    },
                    data: timeData,
                    min: (value) => {
                        return Math.round(value.min);
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#207064",
                        },
                    },
                    //x轴坐标的旋转
                    axisLabel: {
                        rotate: 45,
                        color: "rgba(255,255,255,0.5)",
                    },
                },
                yAxis: {
                    //y轴字体颜色
                    // name: unit,
                    nameGap: 10,
                    nameTextStyle: {
                        color: "#37ddc0",
                        fontSize: 16,
                    },
                    axisLabel: {
                        color: "#207064",
                    },
                    // max: (value) => {
                    //     return parseInt(_max)

                    // },
                    min: (value) => {
                        return value.min;
                    },
                    splitLine: {
                        show: true,
                        //设置y轴的坐标轴刻度设置为虚线和颜色
                        lineStyle: {
                            type: "dashed",
                            color: "#207064",
                        },
                    },
                    //y轴颜色
                    axisLine: {
                        lineStyle: {
                            color: "#207064",
                        },
                    },
                },
                dataZoom: [
                    {
                        show: true,
                        height: 12,
                        xAxisIndex: [0],
                        bottom: 0,
                        start: 100,
                        end: 70,
                        handleIcon:
                            "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                        handleSize: "110%",
                        handleStyle: {
                            color: "#d3dee5",
                        },
                        textStyle: {
                            color: "#fff",
                        },
                        borderColor: "#90979c",
                    },
                    {
                        type: "inside",
                        show: true,
                        height: 15,
                        start: 1,
                        end: 35,
                    },
                ],
                series: [
                    {
                        type: "line",
                        symbol: "rect",
                        symbolSize: 10,
                        data: lineData,
                        //平滑曲线
                        smooth: true,
                        // 普通样式
                        itemStyle: {
                            // 点的颜色
                            color: "#37ddc0",
                        },
                        markLine: {
                            // value:16,
                            symbol: "none",
                            data: shadowData,
                        },
                        markArea: {
                            // label:{backgroundColor:'red'},
                            data: [
                                [
                                    {
                                        // name: '最大值',
                                        yAxis: max,
                                        //设置阴影部分的颜色
                                        itemStyle: {
                                            color: "rgba(41, 33, 33,0.4)",
                                        },
                                    },
                                    {
                                        yAxis: max + 1000,
                                        itemStyle: {
                                            color: "rgba(41, 33, 33, 0.4)",
                                        },
                                    },
                                ],
                            ],
                        },
                    },
                ],
            });
            this.myCharts.hideLoading();
            window.addEventListener("resize", () => {
                this.myCharts.resize();
            });
        },
        getEchartsData() {
            var chartForm = {};
            switch (this.chartData.cn) {
                case "2011":
                    chartForm = {
                        cn: "2011",
                        mn: this.chartData.mn,
                        sampleType: this.chartData.sampleType,
                        beginTime: moment(this.chartData.createTime)
                            .add(-3, "h")
                            .valueOf(),
                        endTime: moment(this.chartData.createTime)
                            .add(3, "h")
                            .valueOf(),
                    };
                    break;
                case "2051":
                    chartForm = {
                        cn: "2051",
                        mn: this.chartData.mn,
                        sampleType: this.chartData.sampleType,
                        beginTime: moment(this.chartData.createTime)
                            .add(-3.5, "days")
                            .valueOf(),
                        endTime: moment(this.chartData.createTime)
                            .add(3.5, "days")
                            .valueOf(),
                    };
                    break;
                case "2061":
                    chartForm = {
                        cn: "2061",
                        mn: this.chartData.mn,
                        sampleType: this.chartData.sampleType,
                        beginTime: moment(this.chartData.createTime)
                            .add(-15, "days")
                            .valueOf(),
                        endTime: moment(this.chartData.createTime)
                            .add(15, "days")
                            .valueOf(),
                    };
                    break;
                case "2031":
                    chartForm = {
                        cn: "2031",
                        mn: this.chartData.mn,
                        sampleType: this.chartData.sampleType,
                        beginTime: moment(this.chartData.createTime)
                            .add(-3, "h")
                            .valueOf(),
                        endTime: moment(this.chartData.createTime)
                            .add(3, "h")
                            .valueOf(),
                    };
                    break;
            };
            console.log(chartForm);
            this.$nextTick(() => {
                this.myCharts = echarts.init(this.$refs.lineecharts);
                this.myCharts.showLoading({
                    text: "正在加载中。。。",
                    maskColor: "rgba(255, 255, 255, 0.8)",
                    color: "#1890ff",
                    textColor: "#000",
                });
            });
            this.$api.postDataEquipmentStatistic(chartForm).then((res) => {
                if (res.data.code == 0) {
                    console.log(res.data);
                    if (res.data.data.length <= 0) {
                        this.$message.warning("暂无数据！");
                    }
                    this.echartsData = res.data.data;
                    this.initEcharFn();
                } else {
                    this.$message.warning(res.data.errorMessage);
                }
            });
        },
    },
    mounted() {},
};
</script>
<style lang="scss" scoped>
/* 图表 */
.line-echarts {
    width: 100%;
    height: 300px;
}
</style>